<template>
    <div>
        <!-- 共用头部组件 -->
        <common-header
            headerTitle="明星店主"
            :hasBack="true"
            :hasHome="true"
        ></common-header>
        <!-- 共用头部组件 -->

        <!-- 共用页面滚动组件 -->
        <common-scroll
            :scrollStyle="scrollStyle"
            :isLoadMore="false"
        >
            <div class="star-list">
                <div
                    class="star-item"
                    v-for="(item,index) of starList"
                    :key="index"
                    @click="goStarDetail(item.starId)"
                >
                    <div class="star-img-box">
                        <img :src="item.starImg" />
                    </div>
                    <div class="star-info-box">
                        <div class="star-main-info">
                            <div class="star-name">{{item.starName}}</div>
                            <img
                                class="star-lebel"
                                src="@/assets/images/star/star-label.png"
                            />
                            <div class="star-date">{{item.starDate}}</div>
                        </div>
                        <div class="star-detail">{{item.starDetail}}</div>
                    </div>
                </div>
            </div>

        </common-scroll>
        <!-- 共用页面滚动组件 -->
    </div>
</template>

<script>
import CommonHeader from '@/components/Header'
import CommonScroll from '@/components/Scroll'
export default {
    name: 'StarIndex',
    components: {
        CommonHeader,
        CommonScroll
    },
    data() {
        return {
            scrollStyle: {
                top: '1.11rem',
                left: '0',
                right: '0',
                bottom: '0'
            },
            starList: [
                {
                    starId: 0,
                    starImg: require('@/assets/images/star/star-img-3.jpg'),
                    starName: '钟林丽',
                    starDetail: '最耀眼的是——你努力奋斗的样子。',
                    starDate: '2019/8/10'
                },
                {
                    starId: 1,
                    starImg: require('@/assets/images/star/star-img-2.jpg'),
                    starName: '马年凤',
                    starDetail: '马年凤是多面体，别样人生也有千种美丽。',
                    starDate: '2019/7/17'
                },
                {
                    starId: 2,
                    starImg: require('@/assets/images/star/star-img-1.jpg'),
                    starName: '钟鑫',
                    starDetail:
                        '她叫钟鑫，拥有双重魅力的优雅女性。她因为爱美而年收入几十万，你爱美吗？',
                    starDate: '2019/7/10'
                }
            ],
            emptyTips: '正在全力加载中...',
            nowPage: 1,
            totalPage: 1,
            isLoading: false
        }
    },
    methods: {
        goStarDetail(id) {
            this.$router.push('/starDetail?starId=' + id)
        }
    }
}
</script>

<style lang="stylus" scoped>
.star-list
    padding 0.4rem
    .star-item
        background #fff
        border-radius 3px
        margin-bottom 0.65rem
        .star-img-box
            display flex
            align-items center
            justify-content center
            width 100%
            height 4.33rem
            overflow hidden
            img
                width 100%
        .star-info-box
            padding 0.26rem 0.32rem
            .star-main-info
                display flex
                align-items center
                .star-name
                    font-size 0.4rem
                    color #000
                    line-height 1
                .star-lebel
                    height 0.48rem
                    margin 0 0.3rem
                .star-date
                    flex 1
                    font-size 0.35rem
                    color #888
                    text-align right
            .star-detail
                font-size 0.35rem
                color #888
                line-height 1.5
                margin-top 0.18rem
                white-space nowrap
                overflow hidden
                text-overflow ellipsis
    .star-item:last-child
        margin-bottom 0
</style>


